<template>
  <div class="home">
    <NavBar /> <!-- 引入导航栏组件 -->
    <header class="header">
      <div class="logo">
        <img src="https://basic.smartedu.cn/img/logo-new-default.59a73b97.png" alt="Logo">
      </div>
      <div class="user-info">
        <button @click="logout" class="logout-button">登出</button> <!-- 登出按钮 -->
      </div>
    </header>
    <main class="main-content">
      <section class="labor-education-section">
        <div class="section-footer">
          <img src="https://web-bd.ykt.eduyun.cn/img/1.f1cc3032.png?x-eos-process=image/format,webp" alt="一粥一饭当思来之不易，半丝半缕恒念物力维艰" class="footer-image">
        </div>
        <div class="content">
          <div class="section">
            <h2>劳动光荣</h2>
            <div class="section-content">
              <div class="link">
                <img src="" alt="理论政策劳动榜样" class="link-image">
              </div>
              <div class="text-content">
                <p>理论政策</p>
                <p>劳动榜样</p>
              </div>
              <p class="enter">点击进入</p>
            </div>
          </div>
          <div class="section">
            <h2>劳动导航</h2>
            <div class="section-content">
              <div class="link">
                <img src="" alt="资源公告设计示例" class="link-image">
              </div>
              <div class="text-content">
                <p>资源公告</p>
                <p>设计示例</p>
              </div>
              <p class="enter">点击进入</p>
            </div>
          </div>
          <div class="section">
            <h2>劳动智慧</h2>
            <div class="section-content">
              <div class="link">
                <img src="" alt="经验分享技艺揭秘" class="link-image">
              </div>
              <div class="text-content">
                <p>经验分享</p>
                <p>技艺揭秘</p>
              </div>
              <p class="enter">点击进入</p>
            </div>
          </div>
        </div>
      </section>
      <!-- 其他板块... -->
    </main>
    <footer class="footer">
      <div class="stats">
        今天已有m人与你一起学习，你们共浏览了n次。
      </div>
    </footer>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import NavBar from "@/components/NavBar.vue";

export default defineComponent({
  components: { NavBar },
  methods: {
    logout() {
      // 登出逻辑
    }
  }
});
</script>

<style scoped>
/* 原有的样式保持不变 */

/* 新增样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #346af3;
  color: white;
  padding: 10px 20px;
}

.logo img {
  width: 100px; /* Adjust based on actual image size */
}

.user-info {
  display: flex;
  align-items: center;
}

.logout-button {
  background-color: #f44336; /* Red background */
  color: white; /* White text */
  border: none; /* No border */
  padding: 5px 10px; /* Padding */
  cursor: pointer; /* Cursor changes to pointer */
  border-radius: 3px; /* Rounded corners */
}

.logout-button:hover {
  background-color: #d32f2f; /* Darker on hover */
}

.footer {
  text-align: center;
  padding: 10px 0;
  background-color: #f2f2f2;
}

.stats {
  text-align: center;
  margin-bottom: 10px;
  background-color: #f2f2f2; /* 单一灰色背景 */
  padding: 10px;
  border-radius: 5px;
}

.labor-education-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.content {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.section {
  flex: 1;
  margin: 0 10px;
  text-align: center;
}

.section h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.link-image {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  margin-bottom: 10px;
}

.text-content p {
  margin: 5px 0;
  font-size: 16px;
  color: #333;
}

.enter {
  font-size: 14px;
  color: #007bff;
  cursor: pointer;
  margin-top: 10px;
}

.section-footer {
  width: 100%;
  margin-bottom: 20px;
}

.footer-image {
  width: 100%;
  height: auto;
  display: block; /* Remove extra space below the image */
}
</style>